<script setup>
import axios from 'axios';
import configJson from '../../../pluginTemp/config.json';
import information from '../../../scripts/information.json';

const { ref, onMounted } = Vue3;

const ipAddress = information.ipAddress;
const tips = ref('');
const fontsClass = ref('normal');

onMounted(() => {
  const port = window.location.port;
  if (!configJson['online-development-mode'].host) {
    fontsClass.value = 'error';
    tips.value = '主机名不存在，请检查host字段';
    return;
  }
  if (!configJson['online-development-mode'].port) {
    fontsClass.value = 'error';
    tips.value = '端口号不存在，请检查port字段';
    return;
  }
  if (!configJson['online-development-mode'].entry) {
    fontsClass.value = 'error';
    tips.value = '入口文件不存在，请检查entry字段';
    return;
  }
  if (configJson['online-development-mode'].port !== port) {
    fontsClass.value = 'warning';
    tips.value =
      'config.json中端口号与当前启动不一致，请确保线上调试包端口正确，否则请修改port字段并重新打包上传';
    return;
  }
  const host = ['http://localhost', 'http://0.0.0.0', `http://${ipAddress}`];
  const hostFlag = 0;
  const getEntryJs = async flag => {
    try {
      await axios.get(
        `${host[flag]}:${configJson['online-development-mode'].port}/${configJson['online-development-mode'].entry}`,
      );
      tips.value = '功能正常，请打开线上地址调试';
      fontsClass.value = 'normal';
    } catch (e) {
      if (flag === 2) {
        fontsClass.value = 'error';
        tips.value = '找不到入口文件，请检查online-development-mode下所有字段是否准确';
        return;
      }
      flag++;
      getEntryJs(flag);
    }
  };
  getEntryJs(hostFlag);
});
</script>

<template>
  <div class="OnlineDevelopmentModeDetails">
    <div class="tips">
      <div :class="fontsClass">{{ tips }}</div>
    </div>
  </div>
</template>

<style lang="less">
.OnlineDevelopmentModeDetails {
  height: 100vh;
  background-color: #0a151f;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;

  .tips {
    font-size: 40px;

    .error {
      color: #ff3e00;
    }

    .warning {
      color: rgb(235, 194, 45);
    }

    .normal {
      color: #4bd964;
    }
  }
}
</style>
